import React, { Component,TextInput } from 'react-native';
import FontIcon from 'react-native-vector-icons/FontAwesome';
//颜色
import * as MColor from '../../designColor/meterialColor';
//redux
import {bindActionCreators} from 'redux';
import * as mainScreenActions from '../../actions/mainScreenActions';
import { connect } from 'react-redux';

const {
  StyleSheet,
  View,
  Text,
  TouchableNativeFeedback,
  Alert
} = React;

// //mongo的默认
// const DEFIP = '10.33.51.107';
// const DEFPORT = '28017';

class serverSet extends Component {
	_testIpAndport=()=>{//带超时
		if (this.state.ip=='' || this.state.port=='') {
			Alert.alert("提示","输入不要为空");
			return
		};
		// Rough implementation. Untested.
		function timeout(ms, promise) {
		  return new Promise(function(resolve, reject) {
		    setTimeout(function() {
		      reject(new Error("timeout"))
		    }, ms)
		    promise.then(resolve, reject)
		  })
		}

		timeout(1500, fetch('http://'+this.state.ip+':'+this.state.port)).then(function(response) {
		  // process response
		  Alert.alert("提示","正常可以连接到数据库")
		}).catch(function(error) {
		  // might be a timeout error
		  Alert.alert("提示","超时不能连接到数据库")
		})
	};
	//单击确定按钮
	_ensuremongoIpPort=()=>{
		this.props.mapactions.reduxchangeMongoIpPort(this.state.ip,this.state.port);
		Alert.alert("提示","设置成功")
	};
	constructor(pros){
		super(pros);
		this.state={
			ip:this.props.mapstate.mongodbip,
			port:this.props.mapstate.mongodbport
		}
	}
  	render() {
	    return (
	    	<View style={styles.contain}>
	    		<View style={styles.title}>
	    			<Text style={{fontSize:30}}>服务地址与端口设置</Text>
	    		</View>
		    	<View style={styles.textinputview}>
		      		<View style={styles.usernameinput}>
		      			<FontIcon style={styles.usernameinputIcon} name="desktop" size={20} color={MColor.DARK_PRIMARY_COLOR} />
		      			<TextInput 
		      				style={styles.usernameinputText}
		      				underlineColorAndroid={MColor.PRIMARY_COLOR}
		      				placeholder="服务器ip" 
		      				value={this.state.ip}
		      				onChangeText={(text) => this.setState({ip: text})}
		      			></TextInput>
		      		</View>
		      		<View style={styles.usernameinput}>
		      			<FontIcon style={styles.usernameinputIcon} name="sitemap" size={20} color={MColor.DARK_PRIMARY_COLOR} />
		      			<TextInput
		      				placeholder="端口号"
		      				value={this.state.port}
		      				onChangeText={(text) => this.setState({port: text})}
		      				underlineColorAndroid={MColor.PRIMARY_COLOR}
		      				style={styles.usernameinputText}></TextInput>
		      		</View>
				</View>
				{/*测试ping，确认设置，返回，使用默认值*/}
				<View style={styles.btnview}>
					<TouchableNativeFeedback onPress={this._testIpAndport}>
						<View style={styles.btnlogin}>
							<Text style={styles.btnloginText}>连接测试</Text>
					    </View>		
					</TouchableNativeFeedback>
					<TouchableNativeFeedback onPress={this._ensuremongoIpPort}>
					    <View style={styles.btnlogin}>
							<Text style={styles.btnloginText}>确认设置</Text>
					    </View>
					</TouchableNativeFeedback>
					<TouchableNativeFeedback onPress={()=>this.setState({ip:this.props.mapstate.def_mongodbip,port:this.props.mapstate.def_mongodbport})}>
						<View style={styles.btnlogin}>
							<Text style={styles.btnloginText}>使用默认值</Text>
					    </View>		
					</TouchableNativeFeedback>
					<TouchableNativeFeedback onPress={this.props.enterloginPage}>
					    <View style={styles.btnlogin}>
							<Text style={styles.btnloginText}>返回</Text>
					    </View>
					</TouchableNativeFeedback>
				</View>
	    	</View>
	    );
  	}
}

var styles = StyleSheet.create({
	contain:{
		flex:1,
		justifyContent:'center',
		alignItems:'center',
		//backgroundColor:'red'
	},
	title:{
		flex:1,
		padding:15,
		alignItems:'center',
		justifyContent:'center'
	},
	textinputview:{
		flex:2,
		//flexDirection:'row',
		width:300,
		//backgroundColor:'green'

	},
	usernameinput:{
		marginVertical:12,
		//flex:1,
		height:40,
		alignItems:'center',
		//backgroundColor:'red',
		flexDirection:'row'
	},
	usernameinputIcon:{
		flex:1,
		marginRight:10,
	},
	usernameinputText:{
		flex:10,
		//color:MColor.LIGHT_PRIMARY_COLOR
	},
	btnview:{
		flex:2
	},
	btnlogin:{
		height:38,
		width:150,
		backgroundColor:MColor.PRIMARY_COLOR,
		justifyContent:'center',
		alignItems:'center',
		marginVertical:5
	},
	btnloginText:{
		fontSize:20,
		color:'white'
	},
});

//将全局state绑定到组件的props中
function mapStateToProps(state) {
  return { 
    //state字段key
    mapstate: state.mainScreenRedux.system,//在上面的组件实例化时存入 
  }
}

//绑定一个方法到props中
function mapDispatchToProps(dispatch) {
  return { 
    mapactions: bindActionCreators(mainScreenActions, dispatch) 
  }
}

//将全局的state绑定到组件中
export default connect(mapStateToProps,mapDispatchToProps)(serverSet);

